<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="p-2" style="display: flex">
    <div class="structure_left" style="width: 300px;">
      <el-card shadow="never" style="overflow: auto; padding: 5px 0 50px 0">
        <el-tree
          ref="deptTreeRef"
          class="tree"
          :indent="0"
          default-expand-all
          highlight-current
          :data="props.treeData"
          node-key="id"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <template #default="{ data }">
            <!-- <el-tooltip effect="dark" :content="data.name" placement="top"> -->
              <span style="display: flex; align-items: center">
                <img :src="getImageSrc(data)" alt="" style="height: 16px; width: 16px" />
                <span class="sub_title">{{ data.modelName }}</span>
              </span>
            <!-- </el-tooltip> -->
          </template>
        </el-tree>
      </el-card>
    </div>
    <div class="model-fields__main">
      <el-card shadow="never">
        <el-table v-loading="loading" :data="metaList" style="width: 100%" border :row-class-name="rowClassName">
          <el-table-column type="expand">
            <template #default="props">
              <h3 class="model-fields__label" style="padding: 5px 0 5px 10px; margin: 0; font-size: 14px; font-weight: 600;">对象属性：</h3>
              <el-table v-if="props.row.fieldList && props.row.fieldList.length > 0" :data="props.row.fieldList" :border="childBorder">
                <el-table-column label="属性名称" prop="fieldName" />
                <el-table-column label="属性中文名" prop="fieldChineseName" />
                <el-table-column label="数据类型" prop="fieldType" />
                <el-table-column label="默认值" align="center" prop="defaultValue" show-overflow-tooltip
                  ><template #default="scope">
                    {{ scope.row.defaultValue || '-' }}
                  </template>
                </el-table-column>
                <el-table-column label="是否为关键字" align="center" prop="isKeyField" show-overflow-tooltip>
                  <template #default="scope">
                    {{ scope.row.isKeyField == 1 ? '是' : '否' || '-' }}
                  </template>
                </el-table-column>
                <el-table-column label="是否允许为空" align="center" prop="isNullable" show-overflow-tooltip>
                  <template #default="scope">
                    {{ scope.row.isNullable == 1 ? '是' : '否' || '-' }}
                  </template>
                </el-table-column>
                <el-table-column label="是否唯一" align="center" prop="isUnique" show-overflow-tooltip>
                  <template #default="scope">
                    {{ scope.row.isUnique || '-' }}
                  </template>
                </el-table-column>
                <el-table-column label="说明及备注" align="center" prop="fieldDescription" show-overflow-tooltip>
                  <template #default="scope">
                    {{ scope.row.fieldDescription || '-' }}
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="字段名称" align="center" prop="fieldName" show-overflow-tooltip />
          <el-table-column label="字段中文名" align="center" prop="fieldChineseName" show-overflow-tooltip />
          <el-table-column label="数据类型" align="center" prop="fieldType" show-overflow-tooltip />
          <el-table-column label="默认值" align="center" prop="defaultValue" show-overflow-tooltip
            ><template #default="scope">
              {{ scope.row.defaultValue || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="是否允许为空" align="center" prop="isNullable" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.isNullable == 1 ? '是' : '否' || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="是否唯一" align="center" prop="isUnique" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.isUnique || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="说明及备注" align="center" prop="fieldDescription" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.fieldDescription || '-' }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
// import node from '@/assets/images/modelEstablish/node.svg';
import model from '@/assets/images/modelEstablish/model.svg';
import generalModel from '@/assets/images/modelEstablish/generalModel.svg';
import {getModelDetail } from '@/api/metaData/model.ts';
const emits = defineEmits(['handleEvent']);
const props = defineProps(['treeData']);
const leftWidth = ref(25);
const deptTreeRef = ref();
const queryName = ref('');
const defaultProps = { children: 'children', label: 'modelName' };
const wrapper = ref(null);
const menuVisible = ref(false);
const menuStyle = ref({ left: 0, top: 0 });
const menuLevel = ref(null);
const nodeType = ref('');
const nodeParent = ref(null);
const nodeContent = ref(null);
const dialogVisible = ref(false);
const nodeForm = ref({
  id: '',
  type: 'node',
  parentId: '',
  name: ''
});
const nodeFormCopy = ref(JSON.parse(JSON.stringify(nodeForm.value)));
const metaList = ref([]);
const loading = ref(false);
const total = ref(0);
const queryParams = ref({
  nodeId: '1879453303423115265',
  modelId: '',
  pageQuery: {
    pageNum: 1,
    pageSize: 10,
    orderByColumn: 'id',
    isAsc: 'descending'
  },
  modelName: '',
  modelType: ''
});
const dialogTitle = ref('添加子节点');
const parentId = ref(null);

const rowClassName = ({ row }) => {
  return row.fieldType == '对象' && row.fieldList && row.fieldList.length > 0 ? '' : 'no-expand';
}
// 过滤树结构
const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.indexOf(value) !== -1;
};

const getImageSrc = (data) => {
  if (data.type === 'node') {
    return model;
  } else if (data.subtype === '通用模型') {
    return generalModel;
  } else if (data.subtype === '普通模型') {
    return model;
  }
  return model;
};

const getFieldList = (id) => {
  getModelDetail({id}).then(res => {
    metaList.value = res.data.fieldList;
  })
}

watchEffect(
  () => {
    deptTreeRef.value?.filter(queryName.value);
  },
  {
    flush: 'post'
  }
);

// 左键点击节点获取模型列表
const handleNodeClick = (data, node) => {
  getFieldList(data.id)
};
</script>

<style lang="scss" scoped>
/* 隐藏不允许展开的行的图标 */
::v-deep .el-table .no-expand .el-table__expand-icon {
  display: none;
}
.structure_left {
  padding-right: 5px;
  // flex: 0 0 300px;
  width: 350px;
}

.explanation {
  font-size: 13px;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  color: #606266;
}

.sub_explanation {
  font-size: 12px;
  height: 20px;
  color: #707477;
  margin-right: 15px;
}
.resizer {
  position: relative;
  width: 0.3%;
  background-color: #d9d9d9;
  cursor: ew-resize;
  border-radius: 5px;
}

.model-fields__main {
  padding-left: 5px;
  flex: 1;
}

/* 树形结构节点添加连线 */
:deep .tree {
  .el-tree-node {
    position: relative;
    padding-left: 10px;
    /* 缩进量 */
  }

  .el-tree-node__children {
    padding-left: 15px;
    /* 缩进量 */
  }

  /* 竖线 */
  .el-tree-node::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #52627c;
  }

  /* 当前层最后一个节点的竖线高度固定 */
  .el-tree-node:last-child::before {
    height: 40px;
    /* 可以自己调节到合适数值 */
  }

  /* 横线 */
  .el-tree-node::after {
    content: '';
    width: 18px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 13px;
    border-width: 1px;
    border-top: 1px dashed #52627c;
  }

  /* 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了 */
  & > .el-tree-node::after {
    border-top: none;
  }

  & > .el-tree-node::before {
    border-left: none;
  }

  /* 展开关闭的icon */
  .el-tree-node__expand-icon {
    font-size: 12px;
    /* 叶子节点（无子节点） */
    &.is-leaf {
      color: transparent;
      /* 也可以去掉 */
      // display: none;
      width: 0px;
    }
  }
}
.sub_title {
  font-size: 14px;
  color: #606266;
  margin-left: 5px;
}
.custom-menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  width: 110px;
  z-index: 1000;
  font-size: 12px;
  ul {
    margin: 0;
    padding: 5px 0;
    list-style: none;
    font-size: 12px;
  }
  ul li {
    padding: 3px 15px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
  }
  ul li:hover {
    background-color: #eee;
  }
}
:deep(.el-tree-node__label) {
  font-size: 12px;
}
</style>
